<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <base href="${rc.contextPath}/">
    <title>选择车型</title>
    <meta name="keywords" content="选择车型">
    <meta name="description" content="选择车型">

    <#include "/commons/stylesheets.ftl">

    <link href="/css/plugins/jsTree/style.min.css" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <input type="hidden" id="selectedVehicle" />
        <input type="hidden" id="selectedVehicleIds" />
        <input type="hidden" id="activityId"  name="activityId" value="${activityId!''}"/>
        <div class="row ">
            <div class="col-sm-10 checkbox-inline" >
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>品牌 </h5>
                    </div>
                     <div class="ibox-content">
                         <div class="row">
                            <div class="form-group">
                                <div class="col-sm-5">
                                    <input type="text" placeholder="" id="searchName" class="col-sm-5" style="margin:0em auto 1em auto; display:block; padding:4px; border-radius:4px; border:1px solid silver;">
                                </div>
                                <div class="col-sm-1">
                                    <button href="projects.html" class="btn btn-primary "  onClick="addVehicle()">确认</>
                                </div>
                                <label class="col-sm-1 control-label"></label>
                                <div class="col-sm-1">
                                    <button href="projects.html" class="btn btn-primary "  onClick="cancelOperation();">取消</>
                                </div>
                            </div>
                         </div>
                         <div class="row">
                             <div id="jstree" class="col-sm-4"></div>
                             <div class="col-sm-6">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-content no-padding" >
                                        <ul class="list-group" id="event_result">
                                            <li class="list-group-item">

                                            </li>
                                        </ul>
                                     </div>
                                </div>
                             </div>

                         </div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</body>

     <!-- 全局js -->
    <#include "/commons/scripts.ftl">

    <!-- 自定义js -->
    <script src="/js/content.min.js?v=1.0.0"></script>
    <script src="/js/app.js"></script>
    <!-- jsTree plugin javascript -->
    <script src="/js/plugins/jsTree/jstree.min.js"></script>

    <style>
        .jstree-open > .jstree-anchor > .fa-folder:before {
            content: "\f07c";
        }
        .jstree-default .jstree-icon.none {
            width: 0;
        }
    </style>

     <script>

     $(document).ready(function(){
        var activityId = $("#activityId").val();
        var treeUrl = 'customerVehicle/queryVehicleJson?activityId='+activityId;

        $('#jstree').data('jstree', false);//清空数据
        //复选框树的初始化
        $.getJSON(treeUrl, function (data) {
            //console.log(data);
            $('#jstree').jstree({
                "checkbox" : {
                  "keep_selected_style" : false
                },
                "plugins" : [ "checkbox","search" ],
                'core': {
                    'data':data ,
                    "themes": {
                        "responsive": false
                    }
                }
            }).bind('loaded.jstree', loadSuccess);

            $('#jstree') .on('changed.jstree', function (e, data) {
                var i, j, r = [], seriesMap={},brandMap = {},seriesIdMap = {};
                if(data.selected.length == 0) {
                    seriesMap={};
                    brandMap = {};
                    seriesIdMap = {};
                }
                for(i = 0, j = data.selected.length; i < j; i++) {
                    //r.push(data.instance.get_node(data.selected[i]).text);
                    var curText = data.instance.get_node(data.selected[i]).text ;
                    var parentId = data.instance.get_node(data.selected[i]).parent;
                    var parentText = data.instance.get_node(parentId).text;
                    var curId = data.instance.get_node(data.selected[i]).id ;

                    //父节点不处理
                    if(parentId == "#") {
                        continue;
                    }
                    //添加seriesId
                    r.push(curId);
                    //初始化map
                    var key=parentId;
                    if(seriesMap[key] == undefined) {
                        seriesMap[key]=curText;
                        brandMap[key]= parentText ;
                        seriesIdMap[key]= curId ;
                        continue;
                    }
                    brandMap[key]= parentText ;
                    seriesMap[key]= seriesMap[key] + "," + curText ;
                    seriesIdMap[key]= seriesIdMap[key] + "," + curId ;
                }
                var showText = "";
                var saveText = "";
                var saveSeries = "";
                var liBegin = "<li class=\"list-group-item\">";
                var liEnd = "</li>";
                for (var key in brandMap) {
                    //console.log("brandMap["+key+"]"+brandMap[key]);

                    var brandName = brandMap[key];
                    var seriesName = seriesMap[key];
                    var seriesId = seriesIdMap[key];
                    showText =   showText +  liBegin + brandName + "：" + seriesName  + liEnd;
                    saveText = saveText +  brandName + "," + seriesName  + ",";
                    saveSeries = saveSeries +  seriesId  + ",";
                }
                showText = showText.replaceAll(',',' ');
                $('#event_result').html('<br /> ' + showText);
                $('#selectedVehicle').val(saveText);
                $('#selectedVehicleIds').val(r.join(','));
            }).jstree();

           var to = false;
           $('#searchName').keyup(function () {
               if(to) { clearTimeout(to); }
               to = setTimeout(function () {
                 var v = $('#searchName').val();
                 $('#jstree').jstree(true).search(v);
               }, 250);
           });


        });

       });

        function loadSuccess(){

        }

        function addVehicle(){
            var selectedVehicles = $("#selectedVehicle").val();
            var selectedVehicleIds = $("#selectedVehicleIds").val();
            console.log("addVehicle selectedVehicles " + selectedVehicles);
            window.parent.refreshVehicle(selectedVehicles,selectedVehicleIds);

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }


</script>
</html>